<template>
	<view class="good-list">
		<match-media :max-width="780">
		    <view v-for="(item,index) in list" :key="index" class="item" @click="navigatorTo(item)">
		    	<view class="i1">
		    		<view class="i1-left">
		    			<view class="text" :style="{color:item[3]}">{{item[9]}}</view>
		    			<view v-if="item[15]==1">
		    				<view class="iconfont icon-remen"></view>
		    			</view>
		    		</view>
		    	</view>
		    	<view class="i2">
		    		<view class="i-left">
		    			<view class="text">{{$u.timeFormat(item[4], 'hh:MM')}}</view>
		    			<view class="text" :class="{colortext:[1,2,3,4,5,6,7,50].includes(item[5])}">{{item[6]}}</view>
		    		</view>
		    		<view class="i-center">
		    			<view class="ii">
		    				<view class="ii-left ">
		    					<image class="image" :src="computImageUrl(item[12])" mode="aspectFit"></image>
		    					<view class="lz-ellipsis-1" style="width: 400rpx;">{{item[10]}}</view>
		    				</view>
		    				<view  v-if="item[5]!=0">
		    					{{item[7]}}
		    				</view>
		    			</view>
		    			<view class="ii">
		    				<view class="ii-left" >
		    					<image class="image" :src="computImageUrl(item[13])"></image>
		    					<view class="lz-ellipsis-1" style="width: 400rpx;">{{item[11]}}</view>
		    				</view>
		    				<view  v-if="item[5]!=0">
		    					{{item[8]}}
		    				</view>
		    			</view>
		    		</view>
		    		<view class="i-right">
		    			<view class="iconfont icon-w_dianshi-"  v-if="item[16]!=0"></view>
		    		</view>
		    	</view>
		    </view>
		</match-media>
		<match-media :min-width="780">
		    <view v-for="(item,index) in list" :key="index" class="item-pc" @click="navigatorTo(item)">
		    	<view class="i1">
		    		<view class="i1-left">
		    			<view class="text" :style="{color:item[3]}">{{item[9]}}</view>
		    			<view v-if="item[15]==1">
		    				<view class="iconfont icon-remen"></view>
		    			</view>
		    		</view>
		    	</view>
		    	<view class="i2">
		    		<view class="i-left">
		    			<view class="text" style="margin-right: 5px;">{{$u.timeFormat(item[4], 'hh:MM')}}</view>
		    			<view class="text" :class="{colortext:[1,2,3,4,5,6,7,50].includes(item[5])}">{{item[6]}}</view>
		    		</view>
		    		<view class="i-center">
		    			<view class="ii">
							<view></view>
		    				<view class="ii-left ">
		    					<view class="lz-ellipsis-1" style="width: 400rpx;">{{item[10]}}</view>
		    					<image class="image" :src="computImageUrl(item[12])" mode="aspectFit"></image>
								<view  v-if="item[5]!=0" style="color: #ffaf01;">
									{{item[7]}}
								</view>
		    				</view>
		    				
		    			</view>
						<view style="margin: 0 10px;margin-top: 4px;">VS</view>
		    			<view class="ii">
		    				<view class="ii-left ii-left2" >
								<view v-if="item[5]!=0" style="color: #ffaf01;">
									{{item[8]}}
								</view>
		    					<image class="image" :src="computImageUrl(item[13])"></image>
		    					<view class="lz-ellipsis-1" style="width: 400rpx;">{{item[11]}}</view>
		    				</view>
		    				<view></view>
		    			</view>
		    		</view>
		    		<view class="i-right">
		    			<view class="iconfont icon-w_dianshi-"  v-if="item[16]!=0"></view>
		    		</view>
		    	</view>
		    </view>
		</match-media>
		
	</view>
</template>

<script>
	let that
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		computed:{
			...mapGetters(['userInfo', 'api']),
			computImageUrl(){
				return (url)=>{
					let domain = url.split("/")
					domain = domain[0]+'//'+ domain[2]
					let finalUrl = url.replace(domain, "");
					let imageurl= getApp().globalData.AppConfig.cdnDomain + finalUrl
					return imageurl
				}
			}
		},
		props:{
			list: {
				type: [Array,Object],
				default(){
					return{}
				}
			},
		},
		watch:{
			// list(data){
			// 	let aaa = JSON.parse(JSON.stringify(data))
			// 	aaa.sort((a,b)=>{
			// 		if(a[4]<b[4]){
			// 		    return -1;
			// 		}
			// 		if(a[4]>b[4]){
			// 		    return 1;
			// 		}
			// 		return 0;
			// 	})
			// 	this.dataList = aaa
			// }
		},
		data(){
			return{
				dataList:[]
			}
		},
		mounted() {
			that=this
		},
		methods:{
			navigatorTo(item){
				this.$emit("clickRow",item)
				console.log(item,item[0]);
				uni.navigateTo({
					url: `/pages/indexDetails/indexDetails?typeName=${item[0]==1?'zq':'lq'}&matchId=${item[1]}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//收藏
			startFn(){
				
			}
		}
		
	}
</script>

<style lang="scss">
	.good-list{
		
		.item,.item-pc{
			padding: 5px 15px;color: #fff;border-bottom: 1px solid hsla(0,0%,100%,.10196);font-size:12px;
			.i1{
				display: flex;align-items: center;justify-content: space-between;
				.i1-left{
					display: flex;align-items: center;
					.text{
						color:hsla(0,0%,100%,.6);
					}
					.iconfont{
						font-size:20px;color: #ffaf01;margin-left: 5px;
					}
				}
			}
			.i2{
				display: flex;align-items: center;
				.i-left{
					width: 240rpx;text-align: center;
					.text{
						color:hsla(0,0%,100%,.6);
					}
					.colortext{
						color: #ffaf01;
					}
				}
				
				.i-center{
					width: 100%;font-size:14px;line-height: 16px;
					.ii{
						display: flex;align-items: center;justify-content: space-between;width: 100%;margin-top: 5px;
						.ii-left{
							display: flex;align-items: center;flex: 1;max-width: 400rpx;
							.image{
								width: 16px;height: 16px;margin-right: 10rpx;
							}
						}
					}
				}
				.i-right{
					width: 55px;text-align: end;
					.iconfont{
						font-size: 24px;color: #ffaf01;
					}
				}
			}
		}
		.item-pc{
			.i2{
				.i-left{
					justify-content: center;display: flex;
				}
				.i-center{
					display: flex;align-items: center;padding: 10px 0;
					.ii{
						.ii-left{
							text-align: right;
							.image{
								margin: 0 5px;
							}
						}
						.ii-left2{
							text-align: left;
						}
					}
				}
			}
			
		}
	}
</style>
